<template>
  <div class="order-container">
    <div class="order-header">
      <i class="el-icon-shopping-basket"></i>
      <span>我的乡村订单</span>
      <div class="order-stats">
        <div class="stat-item">
          <span class="stat-label">总订单</span>
          <span class="stat-value">{{ total }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">已支付</span>
          <span class="stat-value">{{ paidCount }}</span>
        </div>
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="orderList"
      border
      class="order-table"
    >
      <el-table-column prop="id" label="订单编号" width="120" align="center" />

      <el-table-column prop="productType" label="产品类型" align="center">
        <template #default="scope">
          <el-tag :type="getTypeTag(scope.row.productType)" class="type-tag">
            <i :class="getTypeIcon(scope.row.productType)"></i>
            {{ scope.row.productType }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="quantity" label="数量" width="80" align="center" />

      <el-table-column
        prop="unitPrice"
        label="单价"
        align="center"
        :formatter="formatPrice"
      />

      <el-table-column
        prop="totalPrice"
        label="总价"
        align="center"
        :formatter="formatPrice"
      />

      <el-table-column
        prop="status"
        label="状态"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="getStatusTag(scope.row.status)" class="status-tag">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="下单时间"
        width="180"
        align="center"
        :formatter="formatDate"
      />

      <el-table-column
        prop="payTime"
        label="支付时间"
        width="180"
        align="center"
        :formatter="formatDate"
      />
    </el-table>

    <el-pagination
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :total="total"
      :page-sizes="[5, 10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="order-pagination"
    />
  </div>
</template>

<script>
import { listOrder } from "@/api/system/order";

export default {
  props: { userId: { type: Number, required: true } },
  data() {
    return {
      loading: false,
      orderList: [],
      total: 0,
      paidCount: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: '',
      }
    };
  },
  created() {
    this.queryParams.userId = this.userId;
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.paidCount = response.rows.filter(order => order.status === "已支付").length;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    getTypeTag(type) {
      const map = {
        门票: "primary",
        住宿: "success",
        餐饮: "warning",
        文创: "info",
        农产品: "danger"
      };
      return map[type] || "default";
    },
    getTypeIcon(type) {
      const map = {
        门票: "el-icon-ticket",
        住宿: "el-icon-home",
        餐饮: "el-icon-cutlery",
        文创: "el-icon-gift",
        农产品: "el-icon-shopping-bag"
      };
      return map[type] || "el-icon-box";
    },
    getStatusTag(status) {
      const map = {
        待支付: "warning",
        已支付: "success",
        已取消: "info",
        已完成: "primary"
      };
      return map[status] || "default";
    },
    formatPrice(row, column) {
      const value = row[column.property];
      return value ? `¥${Number(value).toFixed(2)}` : "¥0.00";
    },
    formatDate(row, column) {
      const date = row[column.property];
      if (!date) return "-";
      const d = new Date(date);
      return `${d.getFullYear()}-${this.padZero(d.getMonth() + 1)}-${this.padZero(d.getDate())} ${this.padZero(d.getHours())}:${this.padZero(d.getMinutes())}`;
    },
    padZero(num) {
      return num < 10 ? `0${num}` : num;
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getOrderList();
    }
  }
};
</script>

<style scoped lang="scss">
$color-primary: #4CAF50;
$color-secondary: #8D6E63;

.order-container {
  padding: 20px;
  background-color: #fcfcfc;
  border-radius: 8px;
  border: 1px solid #f5f5f5;

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;

    i {
      color: $color-primary;
      margin-right: 8px;
      font-size: 18px;
    }

    .order-stats {
      display: flex;
      gap: 20px;

      .stat-item {
        text-align: center;

        .stat-label {
          display: block;
          font-size: 12px;
          color: $color-secondary;
        }

        .stat-value {
          font-size: 18px;
          font-weight: 500;
          color: $color-primary;
        }
      }
    }
  }

  .order-table {
    margin-bottom: 20px;

    // 替换 /deep/ 为 :deep()
    :deep(.el-table__header) {
      background-color: #f9f9f9;

      th {
        color: $color-secondary;
        border-bottom: 1px solid #f5f5f5;
      }
    }

    :deep(.el-table__body) {
      tr {
        &:hover > td {
          background-color: #f1f8e9;
        }
      }

      td {
        border-bottom: 1px solid #f5f5f5;
      }
    }

    .type-tag {
      padding: 3px 8px;

      i {
        margin-right: 5px;
        font-size: 12px;
      }
    }

    .status-tag {
      padding: 3px 8px;
    }
  }

  .order-pagination {
    text-align: right;

    :deep(.el-pagination__sizes) {
      margin-right: 10px;
    }

    :deep(.el-pagination button),
    :deep(.el-pagination span:not([class*="el-icon"])),
    :deep(.el-pagination__total) {
      color: $color-secondary;
    }

    :deep(.el-pager li) {
      &.active {
        background-color: $color-primary;
        color: white;
        border-color: $color-primary;
      }

      &:hover {
        color: $color-primary;
        border-color: $color-primary;
      }
    }
  }
}
</style>
